<!-- 商品详情页组件 -->
<template>
  <div class="detail">
    <Loading v-if="!showhideloading"></Loading>
    <!-- 详情页头部 -->
    <div
      class="nav-bar"
      ref="header"
      :style="'background:rgba(255,255,255,' + bg + ')'"
    >
      <div class="nav-con">
        <div class="bar_left">
          <div class="ico_box" ref="ico_box">
            <i class="iconfont icon-arrow" onclick="window.history.back()"></i>
          </div>
        </div>
        <div class="bar_title" :style="'opacity:' + bg">
          <ul class="nav-con-warp">
            <li
              :class="navActive == index ? 'active' : ''"
              v-for="(tabs, index) in tabsList"
              :key="index"
              @click="changeNavTab(index)"
            >
              <span v-text="tabs"></span>
            </li>
          </ul>
        </div>
        <div class="bar_right">
          <div class="header_right">
            <div class="ico_box">
              <i class="iconfont icon-shoucang"></i>
            </div>
            <div class="ico_box">
              <i class="iconfont icon-gengduo"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 详情页轮播图 -->
    <div class="detail-swiper" id="content0">
      <mt-swipe :auto="4000">
        <mt-swipe-item
          v-for="detailDatas in detailData.gallery_list"
          :key="detailDatas.img_id"
        >
          <img :src="detailDatas.img_url" alt />
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <!-- 详情页商品价格 -->
    <div class="goods-price">
      <div class="goods_price_wrap">
        <div class="currency-price-warp">
          <em style="font-size: 15.8px">¥</em
          ><span v-text="detailData.shop_price"></span>
        </div>
        <del
          ><em style="font-size: 10.7px">¥</em
          ><span v-text="detailData.market_price"></span
        ></del>
        <span
          class="sold_out"
          v-text="'已售' + detailData.sales_volume + '件'"
        ></span>
      </div>
      <div class="drp-share">
        <i class="iconfont icon-lingcunwei"></i><span>分享</span>
      </div>
    </div>
    <!-- 详情页商品描述 -->
    <div class="goods_module_wrap">
      <div class="goods_title">
        <div class="label-list">
          <div
            class="label-img"
            v-for="img in detailData.goods_label"
            :key="img.id"
          >
            <a href="javascript:;">
              <img :src="img.formated_label_image" />
            </a>
          </div>
        </div>
        <div class="goods_name_wrap">
          <h3 class="flex_1" v-text="detailData.goods_name"></h3>
        </div>
      </div>
      <div class="hig-vip">
        <div class="hig-vip-warp">
          <div class="text">
            <i>
              <img src="@/assets/image/icon-vip.png" class="img" />
            </i>
            <span>高级VIP享超值优惠价</span>
            <div class="currency-price">
              <div class="currency-price-warp">
                <em>¥</em><span v-text="detailData.shop_price"></span>
              </div>
            </div>
          </div>
          <div class="vip-register">
            <a href="javascript:;">
              <span>立即开通</span>
              <i class="iconfont icon-fanhui2"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- 详情页商品功能 -->
    <div class="goods_module_wrap gn">
      <div class="activity_content" @click="showMask = !showMask">
        <div class="title">已选</div>
        <div class="activity_main" v-text="buyNum + '个'"></div>
        <div class="activity_ico">
          <i class="iconfont icon-gengduo"></i>
        </div>
      </div>
      <div class="activity_content" @click="showPopUp">
        <div class="title">送至</div>
        <div class="activity_main">
          <div class="location_wrap">
            <img src="@/assets/image/site.png" class="location_ico" />
            {{ province }} {{ city }} {{ county }}
          </div>
        </div>
        <div class="activity_ico">
          <i class="iconfont icon-gengduo"></i>
        </div>
      </div>
      <div class="activity_content">
        <div class="title">运费</div>
        <div class="activity_main">
          <span v-text="detailData.formated_goods_rate"></span>
        </div>
      </div>
      <div class="activity_content">
        <div class="title">服务</div>
        <div class="activity_main">
          <div class="server_item">
            <img src="@/assets/image/server_ico.png" class="server_ico" />
            <span>正品保证</span>
          </div>
          <div class="server_item">
            <img src="@/assets/image/server_ico.png" class="server_ico" />
            <span>七天无理由退换</span>
          </div>
          <div class="server_item">
            <img src="@/assets/image/server_ico.png" class="server_ico" />
            <span>闪速配送</span>
          </div>
        </div>
      </div>
    </div>
    <!--  详情页商品评论 -->
    <div style="height: 100rem; background: pink" id="content1">
      <h2>商品评论</h2>
    </div>
    <!--  详情页商品推荐 -->
    <div style="height: 80rem; background: red" id="content2">
      <h2>商品推荐</h2>
    </div>
    <!--  详情页商品详情 -->
    <div style="height: 150rem; background: purple" id="content3">
      <h2>商品详情</h2>
    </div>
    <!-- 详情页底部栏购买 -->
    <div class="submit_bar">
      <div class="submit_bar_warp">
        <div class="function_item">
          <i class="iconfont icon-icon_dianpu_12x"></i>
          <span>店铺</span>
        </div>
        <div class="function_item">
          <i class="iconfont icon-icon_kefu2x"></i>
          <span>客服</span>
        </div>
        <div class="function_item" @click="toCartPage">
          <i class="iconfont icon-gouwuche1"></i>
          <div class="info_num" v-text="countDatas"></div>
          <div
            :class="{ numadd: flag }"
            v-if="flag"
            v-text="'+' + buyNum"
          ></div>
          <span>购物车</span>
        </div>
        <button class="cur_btn">
          <span class="button_text" @click="addCartFn">加入购物车</span>
        </button>
        <button class="cur_btn">
          <span class="button_text">立即购买</span>
        </button>
      </div>
    </div>
    <!-- 详情页商品购买蒙版 -->
    <div class="gmmask" v-if="showMask"></div>
    <!-- 详情页商品购买功能 -->
    <transition name="gm">
      <div class="attr-box" v-if="showMask">
        <div class="attr-header">
          <div class="attr-img">
            <img :src="detailData.goods_thumb" class="img" />
          </div>
          <div class="attr-info">
            <div class="attr-name" v-text="detailData.goods_name"></div>
            <div class="attr-price" v-text="'¥' + detailData.shop_price"></div>
            <div class="attr-stock">
              <span v-text="'库存：' + detailData.goods_number"></span>
              <span v-text="'编号：' + detailData.goods_sn"></span>
            </div>
          </div>
          <div class="close" @click="close">
            <i class="iconfont icon-jinakangbaoicons18"></i>
          </div>
        </div>
        <div class="select">
          <span class="tit">数量</span>
          <div class="quantity">
            <div class="stepper">
              <button class="subtract" @click="minus"></button>
              <input type="number" v-model="buyNum" />
              <button class="increase" @click="add"></button>
            </div>
          </div>
        </div>
        <div class="submit">
          <button class="btn" @click="addCartFn">加入购物车</button>
          <button class="btn">立即购买</button>
        </div>
      </div>
    </transition>
    <!-- 详情页选择地址功能 -->
    <div class="address">
      <mt-popup v-model="popupVisible" position="bottom">
        <div class="popBox">
          <div class="header" @click="popupVisible = false">
            <span></span>
            <span>配送至</span>
            <button>确定</button>
          </div>
          <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
        </div>
      </mt-popup>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import debounce from "lodash.debounce";
import city from "@/assets/json/city.json";
import Loading from "@/components/Loading";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Loading,
  },
  data() {
    //这里存放数据
    return {
      background: 0,
      navActive: 0,
      flag: false,
      timer: null,
      bg: 0,
      buyNum: 1,
      showMask: false,
      popupVisible: false,
      tabsList: ["商品", "评论", "推荐", "详情"],
      province: "请选择/省",
      city: "请选择/市",
      county: "请选择/区",
      slots: [
        {
          flex: 1,
          values: Object.keys(city),
          className: "slot1",
          textAlign: "right",
        },
        {
          divider: true,
          content: "-",
          className: "slot2",
        },
        {
          flex: 1,
          values: ["请选择/市"],
          className: "slot3",
          textAlign: "left",
        },
        {
          divider: true,
          content: "-",
          className: "slot4",
        },
        {
          flex: 1,
          values: ["请选择/区"],
          className: "slot5",
          textAlign: "left",
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {
    detailData() {
      return this.$store.state.detailData;
    },
    showhideloading() {
      return this.$store.state.showloading;
    },
    countDatas() {
      var total = 0;
      this.$store.state.cartDatas.map((item) => {
        total += Number(item.value);
      });
      return total;
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 商品增加减少
    add() {
      this.buyNum++;
    },
    minus() {
      if (this.buyNum > 1) {
        this.buyNum--;
      } else {
        this.buyNum = 1;
      }
    },
    toCartPage() {
      //跳转到购物车页面
      this.$router.push("/shopcart");
    },
    close() {
      this.showMask = !this.showMask;
      this.buyNum = 0;
    },
    addCartFn() {
      this.showMask = false;
      this.flag = true; //显示添加购物车的浮动数字
      this.timer = setTimeout(() => {
        this.flag = false;
      }, 200);
      //购物车的逻辑
      //新用户第一次添加购物车
      //1.购物车如果为空，直接存储一条产品信息
      //2.购物车如果不为空，判断当前要添加的产品是否在购物车列表中存在
      // 如果存在，直接将购物车列表中对应产品的数量增加
      // 如果不存，再向列表中插入一条数据
      let detail = this.$store.state.detailData;
      //判断购物车列表中是否有当前数据
      var isCart = this.$store.state.cartDatas.find((item) => {
        if (item.goods_id == detail.goods_id) {
          item.value = item.value + this.buyNum;
        }
        return item.goods_id == detail.goods_id;
      });
      if (!isCart) {
        var addCartData = {
          goods_id: detail.goods_id,
          goods_name: detail.goods_name,
          goods_thumb: detail.goods_thumb,
          shop_price: detail.shop_price,
          shop_name: detail.basic_info.shop_name,
          value: this.buyNum,
          province: this.province,
          city: this.city,
          county: this.county,
          isSelect: true,
        };
      }
      this.$store.commit("setCartDatas", addCartData);
    },
    // 地址功能
    showPopUp() {
      this.popupVisible = true;
    },
    onValuesChange(picker, values) {
      picker.setSlotValues(1, Object.keys(city[values[0]]));
      picker.setSlotValues(2, city[values[0]][values[1]]);
      this.province = values[0];
      this.city = values[1];
      this.county = values[2];
    },
    // 表头功能切换
    changeNavTab(index) {
      this.$nextTick(() => {
        this.navActive = index;
        let element = document.querySelector("#content" + index);
        let top =
          element.offsetTop - this.$refs.header.offsetHeight - window.scrollY;
        window.scrollBy({ top: top, left: 0, behavior: "smooth" });
      });
    },
    scrollPage: debounce(function () {
      let headerHeight = this.$refs.header.offsetHeight;
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      let opacity = top / 200;
      if (opacity > 1) {
        opacity = 1;
      }
      this.bg = opacity;
      const contentId = [];
      contentId.push(document.getElementById("content0"));
      contentId.push(document.getElementById("content1"));
      contentId.push(document.getElementById("content2"));
      contentId.push(document.getElementById("content3"));
      const { scrollY } = window; //es6中的解构赋值
      contentId.reduce((total, content, index) => {
        if (
          !document.querySelector("#content0") &&
          !document.querySelector("#content1") &&
          !document.querySelector("#content2") &&
          !document.querySelector("#content3")
        ) {
          return;
        }
        if (total) {
          return total;
        }

        if (scrollY + headerHeight < content.offsetTop + content.offsetHeight) {
          this.navActive = index;
          total = true;
        }
        return total;
      }, false);
    }, 500),
  },
  mounted() {
    let goods_id = this.$route.params.gid;
    this.$store.dispatch("ActchangedetailData", { goods_id: goods_id });
    document.addEventListener("scroll", this.scrollPage, false);
  },
  beforeDestroy() {
    document.removeEventListener("scroll", this.scrollPage, false);
  },
};
</script>
<style lang="less">
em {
  font-style: normal;
}
.gm-enter,
.gm-leave-to {
  transform: translateY(100%);
}
.gm-enter-active,
.gm-leave-active {
  transition: all 0.3s linear;
}
.detail {
  background: #f4f4f4;
  .content {
    height: 800px;
  }
  .nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1001;
    .nav-con {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 4.9rem;
      .bar_left {
        margin-left: 2rem;
        transition: all 0.5s ease-in;
        .ico_box {
          width: 2rem;
          height: 2rem;
          line-height: 2rem;
          text-align: center;
          border-radius: 50%;
          color: #fff;
          background: rgba(41, 47, 54, 0.4);
        }
      }
      .bar_title {
        opacity: 1;
        width: 60%;
        font-size: 16px;
        font-weight: 500;
        white-space: nowrap;
        transition: all 0.5s ease-in;
        .nav-con-warp {
          width: 100%;
          display: flex;
          justify-content: space-around;
          li {
            flex: 1;
            display: block !important;
            width: 100%;
            font-size: 1.4rem;
            color: #555;
            text-align: center;
          }
          .active {
            color: #000;
            font-size: 1.5rem;
            font-weight: 700;
            position: relative;
            &:after {
              content: "";
              position: absolute;
              width: 2.6rem;
              height: 0.3rem;
              left: 50%;
              bottom: -0.9rem;
              transform: translateX(-50%);
              background: linear-gradient(
                90deg,
                #f91f28,
                rgba(255, 79, 46, 0.35)
              );
            }
          }
        }
      }
      .bar_right {
        border-radius: 50%;
        text-align: center;
        transition: all 0.5s ease-in;
        font-size: 14px;
      }
      .header_right {
        display: flex;
        margin-right: 2rem;
        .ico_box {
          color: #fff;
          background: rgba(41, 47, 54, 0.4);
          border-radius: 50%;
          position: relative;
          width: 2rem;
          height: 2rem;
          line-height: 2rem;
          transition: all 0.5s ease-in;
          &:first-child {
            margin-right: 1.5rem;
          }
          .icon-shoucang {
            font-size: 1.3rem;
          }
          .icon-gengduo {
            font-size: 1.6rem;
          }
        }
      }
    }
  }
  .detail-swiper {
    width: 100%;
    height: 37.5rem;
    .mint-swipe {
      .mint-swipe-indicators {
        bottom: 5px;
        .mint-swipe-indicator {
          opacity: 0.5;
        }
        .is-active {
          opacity: 1;
          background: pink;
        }
      }
    }
    img {
      width: 100%;
      height: 37.5rem;
    }
  }
  .goods-price {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 1.1rem 1.1rem 0.8rem;
    justify-content: space-between;
    .goods_price_wrap {
      display: flex;
      align-items: baseline;
      .currency-price-warp {
        font-size: 1.8rem;
        font-weight: 700;
        display: inline-block;
        color: rgb(242, 14, 40);
      }
      del {
        font-size: 1.2rem;
        color: rgb(153, 153, 153);
        vertical-align: text-bottom;
        margin-left: 8px;
      }
      .sold_out {
        font-size: 1.2rem;
        color: #999;
        margin-left: 1rem;
      }
    }
    .drp-share {
      display: flex;
      flex-direction: column;
      align-items: center;
      i {
        margin: 0;
        color: #333;
        font-size: 1.6rem;
        font-weight: 700;
      }
      span {
        color: #333;
      }
    }
  }
  .goods_module_wrap {
    background: #fff;
    border-radius: 1rem;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    .goods_title {
      padding: 0 1.1rem 1.1rem;
      .label-list {
        display: flex;
        margin-bottom: 0.8rem;
        .label-img {
          height: 20px;
          margin: 0 0.5rem 0 0;
          img {
            max-width: 100%;
            height: 100%;
          }
        }
      }
      .goods_name_wrap {
        display: flex;
        align-items: flex-start;
        h3 {
          font-family: inherit;
          font-weight: 700;
          color: #000;
          font-size: 1.4rem;
          overflow: hidden;
          line-height: 1.5;
          flex: 1;
        }
      }
    }
    .hig-vip {
      padding: 0 1rem 1rem;
      .hig-vip-warp {
        display: flex;
        background: #f7f8fc;
        font-size: 1.2rem;
        padding: 1rem;
        border-radius: 5rem;
        .text {
          display: flex;
          flex-direction: row;
          flex: 1;
          align-items: center;
          .currency-price-warp {
            font-size: 12px;
            font-weight: 700;
            display: inline-block;
            color: rgb(51, 51, 51);
          }

          i {
            width: 2rem;
            height: 2rem;
            margin-right: 0.5rem;
            img {
              width: 100%;
              display: block;
            }
          }
        }
        .vip-register {
          padding: 0.3rem 0.5rem 0.4rem 0.8rem;
          background: #000;
          border-radius: 1.5rem;
          font-size: 1rem;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          span {
            color: #e3c49e;
          }
          .icon-fanhui2 {
            color: #e3c49e;
            margin-left: 0.3rem;
            font-size: 1rem;
          }
        }
      }
    }
  }
  .gn {
    border-radius: 1rem;
    padding: 1.5rem 1.1rem;
    font-size: 1.2rem;
    margin-top: 0.8rem;
    .activity_content {
      display: flex;
      align-items: flex-start;
      &:nth-child(n + 2) {
        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 4.2rem;
          width: 90%;
          height: 0.1rem;
          background-color: #f9f9f9;
        }
      }
      .title {
        font-size: 1.3rem;
        font-weight: 700;
        color: #000;
      }
      .activity_main {
        flex: auto;
        overflow: hidden;
        margin: 0 0 0 1.6rem;
        .location_wrap {
          display: flex;
          align-items: center;
          img {
            display: inline-block;
            width: 1.1rem;
            vertical-align: text-top;
            margin-right: 0.5rem;
          }
        }
      }
      &:nth-child(n + 2) {
        position: relative;
        padding-top: 1.5rem;
        margin-top: 1.5rem;
      }
      .activity_main {
        display: flex;
        .server_item {
          display: flex;
          align-items: center;
          margin-right: 2rem;
          &:last-child {
            margin-right: 0;
          }
          img {
            display: inline-block;
            width: 1.1rem;
            vertical-align: text-top;
            margin-right: 0.5rem;
          }
        }
      }
    }
  }
  .gmmask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
  }
  .attr-box {
    position: fixed;
    top: auto;
    bottom: 0;
    right: auto;
    z-index: 1002;
    background-color: #fff;
    border-radius: 2rem 2rem 0 0;
    .attr-header {
      position: relative;
      padding: 1.5rem;
      display: flex;
      .attr-img {
        width: 9.2rem;
        height: 9.2rem;
        border-radius: 0.2rem;
        overflow: hidden;
        img {
          width: 100%;
          display: block;
        }
      }
      .attr-info {
        margin-left: 1.5rem;
        line-height: 1.5;
        flex: 1;
        display: flex;
        flex-direction: column;
        .attr-name {
          font-size: 1.3rem;
          margin-bottom: 0.5rem;
          padding-right: 1.5rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .attr-price {
          font-size: 1.6rem;
          color: #f92028;
        }
        .attr-stock {
          display: flex;
          color: #888;
          font-size: 1.3rem;
          span {
            &:first-child {
              flex: 0 0 auto;
            }
            &:last-child {
              margin-left: 10px;
            }
          }
        }
      }
      .close {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background: #f2f2f2;
        position: absolute;
        right: 1rem;
        top: 1.5rem;
        text-align: center;
        i {
          font-size: 1.6rem;
          color: #222;
          position: static;
        }
      }
    }
    .select {
      display: flex;
      justify-content: space-between;
      padding: 1.5rem 1.5rem 5rem;
      line-height: 30px;
      font-size: 1.4rem;
      .tit {
        color: #000;
        font-weight: 700;
      }
      button {
        height: 30px;
        box-sizing: border-box;
        background-color: #fff;
        border: 1px solid #eee;
        position: relative;
        padding: 5px;
        vertical-align: middle;
        outline: none;
        &::before {
          content: "";
          width: 9px;
          height: 1px;
          position: absolute;
          margin: auto;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #666;
        }
      }
      .subtract {
        width: 30px;
        border-radius: 5px 0 0 5px;
      }
      input {
        width: 40px;
        height: 26px;
        padding: 1px;
        border: 1px solid #eee;
        border-width: 1px 0;
        border-radius: 0;
        box-sizing: content-box;
        color: #666;
        font-size: 14px;
        vertical-align: middle;
        text-align: center;
        outline: none;
      }
      .increase {
        width: 30px;
        border-radius: 0 5px 5px 0;
        &::after {
          content: "";
          width: 1px;
          height: 9px;
          position: absolute;
          margin: auto;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #666;
        }
      }
    }
    .submit {
      width: 100%;
      display: flex;
      align-items: center;
      bottom: 0;
      left: 0;
      height: 5.4rem;
      background-color: #fff;
      box-sizing: content-box;
      .btn {
        height: 40px;
        line-height: inherit;
        color: #fff;
        outline: none;
        border: none;
        border-radius: 10em;
        background-color: #f91f28;
        padding: 0 1rem;
        margin-right: 0.7rem;
        font-size: 14px;
        font-weight: 700;
        display: flex;
        flex: auto;
        justify-content: center;
        align-items: center;
        &:first-child {
          background-color: #ffc707;
        }
      }
    }
  }
  .address {
    .mint-popup {
      border-radius: 2rem 2rem 0 0;
      width: 100%;
      .popBox {
        height: 25rem;
        width: 100%;
        .picker {
          .picker-slot-wrapper {
            text-align: center;
          }
        }
        .header {
          height: 4.4rem;
          line-height: 4.4rem;
          position: relative;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 1.4rem;
          color: #282828;
          font-weight: 700;
          span {
            &:first-child {
              padding-left: 4.2rem;
              margin-right: 2.4rem;
            }
          }
          button {
            width: 4.2rem;
            height: 3rem;
            border-radius: 20%;
            font-size: 1rem;
            margin-right: 2.4rem;
            border: 0;
            outline: none;
            color: #fff;
            background: #4db9d0;
          }
          i {
            font-style: normal;
          }
        }
      }
    }
  }
  .submit_bar {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    z-index: 101;
    box-sizing: content-box;
    box-shadow: inset 0 1px 0 0 #f8f8f8;
    .submit_bar_warp {
      height: 5.4rem;
      line-height: 5.4rem;
      display: flex;
      align-items: center;
      .function_item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 1rem;
        font-size: 1.2rem;
        line-height: 1;
        position: relative;
        color: #666;
        .info_num {
          position: absolute;
          top: -0.4rem;
          left: 50%;
          min-width: 1rem;
          height: 1rem;
          padding: 0 0.1rem;
          line-height: 1rem;
          border-radius: 0.7rem;
          border: 0.1rem solid #f91f28;
          text-align: center;
          font-size: 1rem;
          color: #f91f28;
          background-color: #fff;
        }
        .numadd {
          width: 100%;
          height: 2rem;
          color: green;
          font-size: 2rem;
          font-weight: bold;
          position: absolute;
          top: 0;
          animation: moveNum 0.5s linear both;
        }
        @keyframes moveNum {
          0% {
            top: 0;
            opacity: 0;
          }
          50% {
            top: -3rem;
            opacity: 1;
          }
          100% {
            top: -3rem;
            opacity: 0;
          }
        }
        i {
          margin-bottom: 0.6rem;
        }
        .icon-gouwuche1 {
          margin-bottom: 0.3rem;
          font-size: 20px;
        }
        &:first-child {
          margin-left: 0.5rem;
        }
      }
      .cur_btn {
        height: 40px;
        line-height: 40px;
        margin-right: 0.7rem;
        padding: 0 1rem;
        border-radius: 10em;
        border: none;
        background-color: #f91f28;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        outline: none;
        display: flex;
        flex: auto;
        justify-content: center;
        align-items: center;
        &:nth-child(4) {
          background-color: #ffc707;
        }
      }
    }
  }
}
</style>